<template>
  <div class="news">
    <div class="news-nav">
      <div class="common-title">
        <h1>{{ aboutMatchDetails.title }}</h1>
        <p>China New Information Consumption Competition News</p>
      </div>
      <div class="rich-text" v-html="aboutMatchDetails.content"></div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "news",
  components: {},
  data() {
    return {
      matchId:''
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    ...mapActions(["getAboutMatchDetails"]),
    getDetail() {
      this.matchId = this.$route.query.id
      let data = {
        id: this.matchId,
      };
      this.getAboutMatchDetails(data);
    },
  },
  computed: {
    ...mapGetters(["aboutMatchDetails"]),
  },
  watch:{
    $route(to) {
       this.matchId = to.query.id;
       this.getDetail();
    }
  }
};
</script>
<style scoped>
.news {
  padding: 50px 0;
  width: 1200px;
  margin: 0 auto;
}
.news-nav .rich-text{
  margin-top: 50px;
}
</style>